<!--
 * @Author: early-autumn
 * @Date: 2020-05-15 15:33:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-07-03 17:20:23
-->
<template>
  <div>
    <el-form inline size="small">
      <el-form-item>
        <el-button type="primary" @click="handleMedicalEditorVisible">新增病历</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain>操作日志</el-button>
      </el-form-item>
    </el-form>
    <el-row v-if="loading" :gutter="20">
      <el-col
        v-for="(card, indexs) in cardData"
        :key="indexs"
        :lg="{ span: 24 }"
        :xl="{ span: 24 }"
      >
        <el-card class="card" shadow="hover">
          <template slot="header">
            <div class="card__header">
              <span style="margin-left: 6px">{{ card.clinicTime }}</span>
              <div>
                <el-button class="card__header-button" type="text" @click="handleUpdate(card)">编辑</el-button>
                <el-button class="card__header-button" type="text" @click="deleteCase(card.id)">删除</el-button>
                <el-button class="card__header-button" type="text">日志</el-button>
              </div>
            </div>
          </template>
          <div class="headerDiv">
            <div class="txt">
              <span v-if="card.detail.diagnose">
                {{ card.type == 0 ? '初诊病历' : '复诊病历' }} 诊断 ：{{
                card.detail.diagnose[0].content
                }}
              </span>
              <span v-if="card.detail.curePlan">治疗 : {{ card.detail.curePlan[0].content }}</span>
            </div>
            <div>
              <span style="margin-right: 60px">医生 : {{ card.doctor }}</span>
              <span>护士 : {{ card.nurse }}</span>
            </div>
          </div>
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                <div class="center">
                  <div class="line">
                    <div class="lineFirst">{{ card.type == 0 ? '主述' : '复诊' }} :</div>
                    <div>{{ card.mainNarrate ? card.mainNarrate : '暂无描述' }}</div>
                  </div>
                </div>
              </template>
              <div class="center">
                <div v-if="card.nowMedicalHistory" class="line">
                  <div class="lineFirst">现病史：</div>
                  <div>{{ card.nowMedicalHistory }}</div>
                </div>
                <div v-if="card.passMedicalHistory" class="line">
                  <div class="lineFirst">既往史:</div>
                  <div>{{ card.passMedicalHistory }}</div>
                </div>
                <div v-for="(item, i) in card.detail.mouthExamine" :key="i + 'e'" class="line">
                  <div class="lineFirst">口腔检查:</div>
                  <div class="first">
                    <div v-if="item.position" class="startDiv" style="width=20%">
                      <div class="leftTop">{{ item.position.split('|')[0].toString() }}</div>
                      <div class="rightTop">{{ item.position.split('|')[1].toString() }}</div>
                      <div class="leftBtn">{{ item.position.split('|')[2].toString() }}</div>
                      <div class="rightBtn">{{ item.position.split('|')[3].toString() }}</div>
                    </div>
                    <div v-else class="startDiv" style="width=20%">
                      <div class="leftTop"></div>
                      <div class="rightTop"></div>
                      <div class="leftBtn"></div>
                      <div class="rightBtn"></div>
                    </div>
                    <div class="message">{{ item.content }}</div>
                  </div>
                </div>
                <div v-for="(item, i) in card.detail.subsidiaryExamine" :key="i + 'd'" class="line">
                  <div class="lineFirst">辅助检查:</div>
                  <div class="first">
                    <div v-if="item.position" class="startDiv" style="width=20%">
                      <div class="leftTop">{{ item.position.split('|')[0].toString() }}</div>
                      <div class="rightTop">{{ item.position.split('|')[1].toString() }}</div>
                      <div class="leftBtn">{{ item.position.split('|')[2].toString() }}</div>
                      <div class="rightBtn">{{ item.position.split('|')[3].toString() }}</div>
                    </div>
                    <div v-else class="startDiv" style="width=20%">
                      <div class="leftTop"></div>
                      <div class="rightTop"></div>
                      <div class="leftBtn"></div>
                      <div class="rightBtn"></div>
                    </div>
                    <div class="message">{{ item.content }}</div>
                  </div>
                </div>
                <div v-for="(item, i) in card.detail.diagnose" :key="i + 'c'" class="line">
                  <div class="lineFirst">诊断:</div>
                  <div class="first">
                    <div v-if="item.position" class="startDiv" style="width=20%">
                      <div class="leftTop">{{ item.position.split('|')[0].toString() }}</div>
                      <div class="rightTop">{{ item.position.split('|')[1].toString() }}</div>
                      <div class="leftBtn">{{ item.position.split('|')[2].toString() }}</div>
                      <div class="rightBtn">{{ item.position.split('|')[3].toString() }}</div>
                    </div>
                    <div v-else class="startDiv" style="width=20%">
                      <div class="leftTop"></div>
                      <div class="rightTop"></div>
                      <div class="leftBtn"></div>
                      <div class="rightBtn"></div>
                    </div>
                    <div class="message">{{ item.content }}</div>
                  </div>
                </div>
                <div v-for="(item, i) in card.detail.curePlan" :key="i + 'a'" class="line">
                  <div class="lineFirst">治疗计划:</div>
                  <div class="first">
                    <div v-if="item.position" class="startDiv" style="width=20%">
                      <div class="leftTop">{{ item.position.split('|')[0].toString() }}</div>
                      <div class="rightTop">{{ item.position.split('|')[1].toString() }}</div>
                      <div class="leftBtn">{{ item.position.split('|')[2].toString() }}</div>
                      <div class="rightBtn">{{ item.position.split('|')[3].toString() }}</div>
                    </div>
                    <div v-else class="startDiv" style="width=20%">
                      <div class="leftTop"></div>
                      <div class="rightTop"></div>
                      <div class="leftBtn"></div>
                      <div class="rightBtn"></div>
                    </div>
                    <div class="message">{{ item.content }}</div>
                  </div>
                </div>
                <div v-for="(item, index) in card.detail.dispose" :key="index + 'b'" class="line">
                  <div class="lineFirst">处置:</div>
                  <div class="first">
                    <div v-if="item.position" class="startDiv" style="width=20%">
                      <div class="leftTop">{{ item.position.split('|')[0].toString() }}</div>
                      <div class="rightTop">{{ item.position.split('|')[1].toString() }}</div>
                      <div class="leftBtn">{{ item.position.split('|')[2].toString() }}</div>
                      <div class="rightBtn">{{ item.position.split('|')[3].toString() }}</div>
                    </div>
                    <div v-else class="startDiv" style="width=20%">
                      <div class="leftTop"></div>
                      <div class="rightTop"></div>
                      <div class="leftBtn"></div>
                      <div class="rightBtn"></div>
                    </div>
                    <div class="message">{{ item.content }}</div>
                  </div>
                </div>
                <div v-if="card.doctorAdvice" class="line">
                  <div class="lineFirst">医嘱:</div>
                  <div>{{ card.doctorAdvice }}</div>
                </div>
                <div v-if="card.remarks" class="line">
                  <div class="lineFirst">备注:</div>
                  <div>{{ card.remarks }}</div>
                </div>
                <div class="btns">
                  <el-button size="mini" plain @click="handleCasePanel(card)">打印病历</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>
    <medical-editor
      v-model="medicalEditorVisible"
      :clinic-person-id="patient.id"
      :title="title"
      :dtype="dtype"
      :case-data="caseData"
      @close="changeHandle"
      @submit="addNewCase"
    />
    <print-panel v-model="printCaseVisible" :data="printData" :width="width" path="/print/Case"></print-panel>
  </div>
</template>

<script>
import {
  listCase,
  getCase,
  delCase,
  addCase,
  updateCase,
  exportCase,
} from '@/api/erp/case'
import PrintPanel from '@/components/yiya/PrintPanel'

export default {
  name: 'MedicalRecordPane',
  components: {
    MedicalEditor: () => import('./MedicalEditor'),
    PrintPanel,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      cardData: [],
      // 显示新增编辑
      medicalEditorVisible: false,
      loading: true,
      title: '',
      caseData: {},
      printCaseVisible: false,
      printData: {},
      width: '1200px',
      dtype: 0,
    }
  },
  mounted() {
    this.getListCase()
  },
  methods: {
    handleCasePanel(data) {
      this.printData = {...this.patient, ...data}
      this.printCaseVisible = true
    },
    handleUpdate(data) {
      this.title = '修改病历'
      this.dtype = 1
      this.medicalEditorVisible = true
      this.caseData = data
    },
    deleteCase(id) {
      this.$confirm('确认要删除此条病历吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return delCase(id)
        })
        .then((res) => {
          if (res.code == 200) {
            this.msgSuccess('删除成功')
            this.getListCase()
          }
        })
        .catch((res) => {
          // this.msgError(res.msg)
        })
    },
    async getListCase() {
      this.loading = false
      const { rows } = await listCase({
        clinicPersonId: this.patient.id,
        isAsc: 'desc',
        orderByColumn: 'clinicTime',
        pageNum: 1,
        pageSize: 1000000,
      })
      rows.forEach((item) => {
        item.detail = JSON.parse(item.detail)
        // item.detail = JSON.stringify(JSON.parse(item.detail ))
      })
      this.cardData = rows
      this.loading = true
    },
    handleMedicalEditorVisible() {
      this.title = '新增病历'
      this.dtype = 0
      this.medicalEditorVisible = true
      this.caseData = {}
    },
    changeHandle(e) {
      this.medicalEditorVisible = e
    },
    addNewCase(formData) {
      console.log(formData)
      if (formData.title == '新增病历') {
        addCase(formData).then((response) => {
          if (response.code === 200) {
            this.getListCase()
            this.msgSuccess('新增成功')
          } else {
            this.msgError(response.msg)
          }
        })
      } else {
        console.log('formData==>', formData)
        updateCase(formData).then((res) => {
          if (res.code === 200) {
            this.getListCase()
            this.msgSuccess('修改成功')
          } else {
            this.msgError(res.msg)
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  margin-bottom: 20px;

  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card__header-button {
      margin-left: 10px;
      padding: 3px;
    }
  }

  .card__content {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .headerDiv {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .txt {
      width: 800px;
      height: 18px;
      overflow: hidden;
      display: block;
      display: flex;
      span {
        width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
      }
      span:nth-child(1) {
        margin-right: 60px;
      }
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    .btns {
      display: flex;
      width: 100%;
      justify-content: center;
      margin-top: 16px;
    }
    .line {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      line-height: 34px;
      margin-top: 14px;
      .lineFirst {
        display: flex;
        flex-shrink: 0;
        width: 100px;
      }
      .lineSecond {
        width: 100%;
      }
      .first {
        display: flex;
        width: 100%;
        .startDiv {
          display: flex;
          flex-wrap: wrap;
          flex-shrink: 0;
          flex-direction: row;
          justify-content: space;
          width: 236px;
          height: 30px;
          text-align: center;
          div {
            line-height: 15px;
            width: 50%;
            height: 50%;
            text-align: center;
          }
          .leftTop {
            border-right: 1px solid #666;
            border-bottom: 1px solid #666;
          }
          .rightTop {
            border-left: 1px solid #666;
            border-bottom: 1px solid #666;
          }
          .leftBtn {
            border-right: 1px solid #666;
            border-top: 1px solid #666;
          }
          .rightBtn {
            border-left: 1px solid #666;
            border-top: 1px solid #666;
          }
        }
        .message {
          margin-left: 20px;
        }
      }
    }
  }
}
.el-collapse >>> .el-collapse-item__header{
  height: inherit;
}
</style>
